<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>加解密测试页面</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="layui/css/layui.css"  media="all">
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">加密测试</div>
				<div class="layui-card-body">
					<div class="layui-form-item">
						<label class="layui-form-label">加密前内容</label>
						<div class="layui-input-block">
							<input type="text" id="unLockInfo" autocomplete="off" placeholder="请输入要加密的内容" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit="" lay-filter="lock1">立即加密</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">加密后内容</label>
						<div class="layui-input-block">
							<textarea placeholder="" class="layui-textarea" id="lockInfo"></textarea>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header">解密测试</div>
				<div class="layui-card-body">
					<div class="layui-form-item">
						<label class="layui-form-label">加密后内容</label>
						<div class="layui-input-block">
							<input type="text" id="lockInfo2" autocomplete="off" placeholder="请输入要解密的内容" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit="" lay-filter="unLock1">立即解密</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">解密后内容</label>
						<div class="layui-input-block">
							<textarea placeholder="" class="layui-textarea" id="unLockInfo2"></textarea>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div style="padding: 20px; background-color: #F2F2F2;">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header">后端交互加解密</div>
				<div class="layui-card-body">
					<div class="layui-form-item">
						<label class="layui-form-label">要加密内容</label>
						<div class="layui-input-block">
							<input type="text" id="unLockInfo3" autocomplete="off" placeholder="请输入内容" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit="" lay-filter="lock2">进行加密</button>
						</div>
					</div>
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">加密后内容</label>
						<div class="layui-input-block">
							<textarea placeholder="" class="layui-textarea" id="lockInfo3"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit="" lay-filter="send">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">后端返回</label>
						<div class="layui-input-block">
							<textarea placeholder="" class="layui-textarea" id="lockInfo4"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit="" lay-filter="unLock2">进行解密</button>
						</div>
					</div>
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">解密后内容</label>
						<div class="layui-input-block">
							<textarea placeholder="" class="layui-textarea" id="unLockInfo4"></textarea>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="../layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'layedit', 'laydate','layer'], function(){
	var table = layui.table, form = layui.form, laydate = layui.laydate, layer = layui.layer;
	var $ = layui.jquery;
	var key = '1234567890123456'; // 密钥 长度16
	var iv = 'qwertyuiopasdfgh'; // 偏移量 长度16

	//左上角的加密功能
	form.on("submit(lock1)", function (data) {
		var unLockInfo = $("#unLockInfo").val();
		var encrypted = encodeAesString(unLockInfo, key, iv);
		$("#lockInfo").val(encrypted);
	});

	//右上角的解密功能
	form.on("submit(unLock1)", function (data) {
		var lockInfo2 = $("#lockInfo2").val();
		var decryptedStr = decodeAesString(lockInfo2, key, iv);
		$("#unLockInfo2").val(decryptedStr);
	});

	//下方的加密功能
	form.on("submit(lock2)", function (data) {
		var unLockInfo3 = $("#unLockInfo3").val();
		var encrypted = encodeAesString(unLockInfo3, key, iv);
		$("#lockInfo3").val(encrypted);
	});

	//下方的发送功能
	form.on("submit(send)", function (data) {
		var lockInfo3 = $("#lockInfo3").val();
		$.ajax({
			async: true,
			url: "http://localhost:8080/api/decrypt",
			type: "post",
			dataType: "json",
			data: {content:lockInfo3},
			success: function (data) {//这里的success指成功接收后台返回的数据
				if (data.result) {//如果data.result为true
					layer.msg(data.info);//弹出data.info里面包含的内容提示
					$("#lockInfo4").val(data.obj);
				} else {
					layer.msg(data.info);//弹出data.info里面包含的内容提示
				}
			}
		});
	});

	//下方的解密功能
	form.on("submit(unLock2)", function (data) {
		var lockInfo4 = $("#lockInfo4").val();
		var decryptedStr = decodeAesString(lockInfo4, key, iv);
		$("#unLockInfo4").val(decryptedStr);
	});

});

//加密功能
function encodeAesString(data, key, iv) {
	var key = CryptoJS.enc.Utf8.parse(key);
	var iv = CryptoJS.enc.Utf8.parse(iv);
	var encrypted = CryptoJS.AES.encrypt(data, key, {
		iv: iv,
		mode: CryptoJS.mode.CBC,
		padding: CryptoJS.pad.Pkcs7
	});
	return encrypted;
}

// 解密功能
function decodeAesString(encrypted, key, iv) {
	var key = CryptoJS.enc.Utf8.parse(key);
	var iv = CryptoJS.enc.Utf8.parse(iv);
	var decrypted = CryptoJS.AES.decrypt(encrypted, key, {
		iv: iv,
		mode: CryptoJS.mode.CBC,
		padding: CryptoJS.pad.Pkcs7
	});
	return decrypted.toString(CryptoJS.enc.Utf8);
}
</script>
<script src="js/aes.js"></script>
<script src="js/crypto-js.js"></script>
</body>
</html>